<script src="../../config/defaultSettings.js"></script>
<template>
  <page-header-wrapper :title="false">
    <a-card>
      <a-card
        :bordered="false"
      >
        <h1 class="title">{{ content.title }}</h1>
        <p>{{ content.created_at }}  发布者：{{ content.author }}</p>
        <div class="content">
          <p>{{ content.describe }}</p>
        </div>
        <div class="tool" :style="{ textAlign: 'center' }">
          <a-button type="default" style="margin-right:10px" @click="onDig('1')">赞({{ content.is_top }})</a-button>
          <a-button type="default" @click="onDig('2')">踩({{ content.is_step_on }})</a-button>
        </div>
      </a-card>
      <a-card>
        <a-list
          class="comment-list"
          :header="`${comments.length} 评论`"
          item-layout="horizontal"
          :data-source="comments"
        >
          <a-list-item slot="renderItem" slot-scope="item">
            <a-comment :author="item.author" :avatar="item.image">
              <p slot="content">
                {{ item.content }}
              </p>
              <a-tooltip slot="datetime" :title="item.created_at">
                <span>{{ item.created_at }}</span>
              </a-tooltip>
            </a-comment>
          </a-list-item>
        </a-list>
        <a-comment>
          <a-avatar
            slot="avatar"
            :src="avatar"
          />
          <div slot="content">
            <a-form-model
              ref="form"
              :rules="commetRules"
              :model="commentForm"
            >
              <a-form-model-item prop="content">
                <a-textarea :rows="4" placeholder="输入要评论的内容" v-model="commentForm.content" />
              </a-form-model-item>
              <a-form-model-item>
                <a-button html-type="submit" :loading="submitting" type="primary" @click="handleSubmit">
                  评论
                </a-button>
              </a-form-model-item>
            </a-form-model>
          </div>
        </a-comment>
      </a-card>
    </a-card>
  </page-header-wrapper>
</template>

<script>
import { mapGetters } from 'vuex'
import moment from 'moment'
import { addComment, addLog, getDetail } from '@/api/bbs'
export default {
  name: 'BBSDetail',
  data () {
    return {
      moment,
      questionId: '',
      content: {},
      comments: [],
      submitting: false,
      commentForm: {},
      commetRules: {
        content: [{ required: true, message: '评论内容不能为空', trigger: 'blur' }]
      }
    }
  },
  created () {
    this.questionId = this.$route.params.id
    this.getQuestionDetail(this.questionId)
  },
  methods: {
    getQuestionDetail (id) {
      const app = this
      getDetail(id).then(res => {
        if (res.status === 0) {
          app.content = res.result.question
          app.comments = res.result.comment
        } else {
          app.$confirm({
            title: res.msg,
            onOk: () => {
              app.$router.go(-1)
            },
            onCancel: () => {
              app.$router.go(-1)
            }
          })
        }
      })
    },
    handleSubmit () {
      const app = this
      app.$refs.form.validate(valid => {
        if (valid) {
          const data = {}
          app.submitting = true
          data['filter[content]'] = app.commentForm.content
          addComment(this.questionId, data).then(res => {
            if (res.status === 0) {
              app.submitting = false
              app.commentForm.content = ''
              app.getQuestionDetail(app.questionId)
            }
          })
        } else {
          return false
        }
      })
    },
    onDig (type) {
      const app = this
      const data = {}
      if (type === '1') {
        data['filter[is_top]'] = '1'
        addLog(app.questionId, data).then(res => {
          if (res.status === 0) {
            app.getQuestionDetail(app.questionId)
          } else {
            app.$warning({
              title: res.msg
            })
          }
        })
      }
      if (type === '2') {
        data['filter[is_step_on]'] = '1'
        addLog(app.questionId, data).then(res => {
          if (res.status === 0) {
            app.getQuestionDetail(app.questionId)
          } else {
            app.$warning({
              title: res.msg
            })
          }
        })
      }
    }
  },
  computed: {
    ...mapGetters(['avatar'])
  }
}
</script>

<style scoped>
.title {
  font-size: 28px;
  font-weight: bold;
}
</style>
